<template>
  <div>
    <SupInput
      :InpList="InpList"
      :BtnList="BtnList"
      :selList="selList"
      @clickFn="btnFn"
    >
    </SupInput>
    <Suptable
      :isImg="true"
      :headerData="headerData"
      :tableData="tableData"
      :total="total"
      :pagesizeList="fenye"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :isTag="true"
      :TagName="TagName"
    >
      <template v-slot:tagSlot="{ row }">
        <el-tag>{{ row.row.status }}</el-tag>
      </template>
      <template v-slot:imgSlot="{ row }">
        <div>
          <img :src="row.row.picUrl" alt="" width="100" height="50" />
        </div>
      </template>

      <template v-slot:opera="{ row }">
        <el-button type="primary" @click="editClick(row.row)" size="small"
          >编辑</el-button
        >
        <el-button type="danger" @click="delClick(row.row.id)" size="small"
          >删除</el-button
        >
      </template>
    </Suptable>
    <div>
      <el-dialog
        :title="isEdit ? '编辑' : '新增'"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="ruleForm.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="专柜价格" prop="price1">
              <el-input v-model="ruleForm.price1"></el-input>
            </el-form-item>
            <el-form-item label="当前价格" prop="price2">
              <el-input v-model="ruleForm.price2"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  goodsList,
  detgoods,
  querygoods,
  addgoods,
  editgoods,
} from "@/api/goodsMock.js";
import Suptable from "@/components/Suptable";
import SupInput from "@/components/SupInput";
export default {
  name: "goodsList",
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      editId: "",
      ruleForm: {
        goodsname: "",
        price1: "",
        price2: "",
      },
      rules: {
        goodsname: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        price1: [
          { required: true, message: "请输入专柜价格", trigger: "blur" },
        ],
        price2: [
          { required: true, message: "请输入当前价格", trigger: "blur" },
        ],
      },
      selList: [
        {
          title: "请选择审批状态",
          value: [],
          options: [
            // 0通过  1拒接 2待审批
            {
              value: "0",
              label: "审批通过",
            },
            {
              value: "1",
              label: "待审批",
            },
            {
              value: "2",
              label: "不通过",
            },
            {
              value: "3",
              label: "未提交",
            },
          ],
        },
      ],
      InpList: [
        {
          model: "",
          text: "请输入商品编号",
        },
        {
          model: "",
          text: "请输入商品名称",
        },
      ],
      BtnList: [
        {
          icon: "el-icon-search",
          name: "查找",
        },
        {
          icon: "el-icon-edit",
          name: "添加",
        },
      ],
      pagesize: 10,
      pagenum: 1,
      total: 0,
      fenye: [5, 10, 15, 20],
      tableData: [],
      TagName: "审批状态",
      headerData: [
        {
          prop: "id",
          label: "商品编号",
        },
        {
          prop: "goodsname",
          label: "名称",
        },
        {
          prop: "price1",
          label: "专柜价格",
        },
        {
          prop: "price2",
          label: "当前价格",
        },
      ],
    };
  },
  mounted() {
    let _self = this;
    _self.GoodsList();
  },
  methods: {
    // 编辑商品
    editClick(row) {
      let _self = this;
      console.log(row);
      _self.isEdit = true;
      _self.dialogVisible = true;
      _self.ruleForm.goodsname = row.goodsname;
      _self.ruleForm.price1 = row.price1;
      _self.ruleForm.price2 = row.price2;
      _self.editId = row.id
    },
    submitForm(formName) {
      let _self =this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
             if (!_self.isEdit) {
            let { goodsname, price1, price2} = _self.ruleForm;
           let data = {
              goodsname:goodsname,
              price1: price1,
              price2:price2,
            };
          addgoods(data).then((res) => {
            console.log(res);
             if (res.meta.status == "200") {
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
                _self.GoodsList();
              } else {
                _self.$message(res.meta.msg);
              }
          });
        }else {
            let data = {
              id: _self.editId,
              goodsname: _self.ruleForm.goodsname,
              price1: _self.ruleForm.price1,
              price2: _self.ruleForm.price2,
            };
            editgoods(data).then((res) => {
              console.log(res);
              if (res.meta.status == 200) {
                _self.GoodsList();
                _self.$message("更改成功");
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pagesize = val;
      _self.GoodsList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.pagenum = val;
      _self.GoodsList();
    },
    // 删除商品
    delClick(id) {
      console.log(id);
      let _self = this;
      // 用户的删除必须先提示
      _self
        .$confirm("确定删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let data = { id };
          detgoods(data).then((res) => {
            console.log(res);
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功!",
              });
              _self.GoodsList();
            } else {
              _self.$message({
                type: "info",
                message: res.meta.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    btnFn(index) {
      let _self = this;
      console.log(index);
      console.log(_self.InpList[0].model);
      console.log(_self.InpList[1].model);
      console.log(_self.selList[0].value);
      if (index == 0) {
        let data = {
          id: _self.InpList[0].model,
          goodsname: _self.InpList[1].model,
          status: _self.selList[0].value,
        };
        querygoods(data).then((res) => {
          console.log(res);
          if (res.meta.status == 200) {
            _self.tableData = [];
            for (let item of res.data.arr) {
              let goodData = {
                id: item.id,
                goodsname: item.goodsname,
                picUrl: item.picUrl,
                price1: item.price1,
                price2: item.price2,
                status:
                  item.status == 0
                    ? "通过"
                    : item.status == 1
                    ? "待审批"
                    : "不通过",
              };
              _self.tableData.push(goodData);
            }
          } else {
            _self.GoodsList();
          }
        });
      } else if (index == 1) {
        let _self = this;
        _self.isEdit = false
        _self.dialogVisible = true;
         _self.ruleForm = {
          goodsname: "",
          price1: "",
          price2: "",
        };
      }
    },
    GoodsList() {
      let _self = this;
      let data = {
        pagesize: _self.pagesize,
        pagenum: _self.pagenum,
      };
      goodsList(data).then((res) => {
        console.log(res);
        let _self = this;
        _self.tableData = [];
        for (let item of res.data.user) {
          let goodData = {
            id: item.id,
            goodsname: item.goodsname,
            picUrl: item.picUrl,
            price1: item.price1,
            price2: item.price2,
            status:
              item.status == 0
                ? "通过"
                : item.status == 1
                ? "待审批"
                : "不通过",
          };
          _self.tableData.push(goodData);
        }
        _self.total = res.data.total;
        _self.pagenum = res.data.pagenum;
      });
    },
  },
  components: {
    Suptable,
    SupInput,
  },
};
</script>